<!DOCTYPE html>
<html>
<head>
	<title>样式绑定</title>
	<script type="text/javascript" src="./vue.js"></script>
	<style type="text/css">
		.activited {
			color : red;
		}
	</style>
</head>
<body>	
	<div id="app">
		<div :class="{activited:isActivited}" @click="handStyle">class 绑定方式1</div>
		<div :class="[activited2]" @click="handStyle2">class 绑定方式2</div>
		<div :style="activited3">style 方式绑定</div>
		<div :class="classObject">class Object</div>
		<div :class="classObject2">class Object2</div>
	</div>
	<script>
		var app = new Vue({
			el : '#app' ,
			data : {
				isActivited : false,
				activited2 : "" ,
				activited3 : {
					color : "red"
				},
				classObject : {
					active : true,
					'text-danger': false
				},
				isActive: true,
				error:null
			},
			methods : {
				handStyle : function() {
					this.isActivited = !this.isActivited;
				},
				handStyle2 : function() {
					this.activited2 = this.activited2 === "activited" ? "" : "activited"; 
				}
			},
			computed: {
				classObject2 : function() {
					return {
						active : this.isActive && !this.error,
						'text-danger': this.error && this.error.type === 'fatal'
					}
				}
			}
			
		});
	</script>
</body>
</html>